<template>
  <button @click="add">点我自增</button>
  <span>
    您好
    <slot name="guest"></slot>
    现在第{{ count }}次访问
    <slot name="position" :times="count" :counterName="name"></slot>
  </span>
  <!-- <button @click="closeSon">点我关闭计数器</button> -->
  <button @click="$emit('closeCounter')">点我关闭计数器</button>
  <button @click="changeNoClass">点我改变list元素的样式为无标识</button>
  <button @click="changeCircleClass">点我改变list元素的样式为圆形标识</button>
  <!-- <button @click="isShow = true">点我打开计数器</button> -->
</template>

<script setup>
import { ref } from "vue";
// const props=defineProps(['counterName','width'])
const props = defineProps({
  counterName: { type: String, default: "哈哈哈" },
  // width:Number,
  // isFirst:Boolean
});
const emit = defineEmits([
  "closeCounter",
  "changeNoStyle",
  "changeCircleStyle",
]);

console.log("子组件中的name是", props.counterName);
console.log("子组件中的width是", props.width);
console.log("子组件中的isFirst是", props.isFirst);
let count = ref(0);
let name = ref("计数器");
function add() {
  count.value++;
  //可以修改对象类型的数据，但是建议不要这么做，会导致代码耦合性变强。
  // props.counterName.name = "roy" + count.value;
}

// 触发自定义事件的方法
function closeSon() {
  // isShow.value = false;
  console.log("关闭按钮被点击了。");
  //触发组件的closeCounter事件。
  emit("closeCounter");
}

function changeNoClass() {
  emit("changeNoStyle", "noClass", "roy");
}
function changeCircleClass() {
  emit("changeCircleStyle", ["circleClass", "will"]);
}
</script>

<style lang="scss" scoped></style>
